import { Button, Stack, TextField, Typography, styled } from '@mui/material'
import { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { AppContext } from '../../store/storeProvider'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledGoBack = styled(Button)(() => ({
	width: 'fit-content',
	textTransform: 'none',
	color: '#7B8E98',
	fontFamily: 'Nunito',
	fontSize: '14px',
	border: '0',
}))

const StyledSave = styled(Button)(() => ({
	marginTop: '24px',
	marginBottom: '24px',
	width: 'fit-content',
	height: '32px',
	padding: '9px, 16px, 9px, 16px',
	borderRadius: '87px',
	border: '1px',
	borderStyle: 'solid',
	textTransform: 'none',
	borderColor: '#7B8E98',
	color: '#000000',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
	marginBottom: '20px',
}))

const StyledChangePassword = styled(Typography)(() => ({
	marginTop: '24px',
	marginBottom: '24px',
	styleName: 'Body : P1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '16px',
	fontWeight: '800',
	lineHeight: '20px',
	letterSpacing: '0em',
	textAlign: 'left',
}))

const StyledTextField = styled(TextField)(() => ({
	width: 'fit-content',
}))

const ProfileEdit = () => {
	const { state } = useContext(AppContext)
	const navigate = useNavigate()
	return (
		<StyledContainer>
			<StyledGoBack onClick={() => navigate(-1)}>{'< Назад'}</StyledGoBack>
			<StyledHeader>Мои данные</StyledHeader>
			<Stack direction={'row'} spacing={2}>
				<StyledTextField label='Имя' defaultValue={state.user.name} />
				<StyledTextField label='Почта' defaultValue={state.user.email} />
			</Stack>
			<StyledSave>Сохранить</StyledSave>
			<StyledChangePassword>Изменить пароль</StyledChangePassword>
			<Stack direction={'column'} spacing={2}>
				<StyledTextField placeholder='Старый пароль' />
				<StyledTextField placeholder='Новый пароль' />
			</Stack>
			<StyledSave>Сохранить</StyledSave>
		</StyledContainer>
	)
}

export default ProfileEdit
